@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn {
    @apply inline-block h-7 rounded-md border border-slate-700 bg-slate-800/60 px-2 text-xs text-white/60 shadow-[rgba(0,0,0,0.12)_0px_1px_3px,rgba(0,0,0,0.24)_0px_1px_2px] ring-blue-900/20 transition hover:border-slate-600/40 hover:bg-slate-800 focus:border-blue-800 focus:outline-none focus:ring-[3px] disabled:text-white/40 disabled:opacity-50;
  }
  .menubar-trigger {
    @apply relative flex h-12 select-none items-center px-4 py-1.5 text-xs font-semibold text-slate-500 outline-none hover:z-10 hover:bg-zinc-950 data-[highlighted]:bg-zinc-950 data-[state=open]:bg-zinc-950 data-[disabled]:text-zinc-600/60;
  }
  .menubar-item-radio {
    @apply flex h-12 select-none items-center px-3 py-1.5 text-xs font-semibold text-slate-500 outline-none transition-all hover:bg-zinc-950 data-[state=checked]:text-white data-[state=checked]:shadow-[inset_0_-2px_theme('colors.blue.700')];
  }
  .menubar-content {
    @apply relative z-50 min-w-[220px] rounded-md border border-zinc-800 bg-zinc-950 p-[5px] text-xs shadow-[rgba(0,0,0,0.12)_0px_1px_3px,rgba(0,0,0,0.24)_0px_1px_2px] outline-none will-change-[transform,opacity] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)];
  }
  .menubar-item {
    @apply relative flex h-[25px] select-none items-center rounded px-[10px] text-slate-500 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-blue-600 data-[state=open]:bg-zinc-800 data-[highlighted]:to-slate-800 data-[disabled]:text-slate-500/40 data-[highlighted]:data-[state=open]:text-white data-[highlighted]:text-white data-[state=open]:text-slate-500;
  }
  .menubar-item-shortcut {
    @apply ml-auto pl-5 text-slate-500 group-data-[disabled]:text-slate-700 group-data-[highlighted]:text-white;
  }
  .menubar-separator {
    @apply -mx-1 my-1 h-px bg-zinc-800;
  }
}
